<template>
  <div>
    <!-- 幻灯片 开始 -->
    <!-- el-走马灯轮播图 -->
    <el-carousel indicator-position="outside" :interval="4000" height="400px">
      <el-carousel-item v-for="banner in bannerList" :key="banner.id">
        <a
          target="_blank"
          :href="banner.linkUrl"
          style="
            color: #000000;
            text-align: center;
            overflow: hidden;
            width: 100%;
          "
        >
          <el-image
            style="display: block; width: 50%; height: auto; margin: 0 auto"
            :src="banner.imageUrl"
          ></el-image>
          <!-- <img :src="banner.imageUrl" :alt="banner.title" /> -->
        </a>
      </el-carousel-item>
    </el-carousel>
    <!-- <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div
          v-for="banner in bannerList"
          :key="banner.id"
          class="swiper-slide"
          style="background: #040b1b"
        >
          <a target="_blank" :href="banner.linkUrl">
            <img :src="banner.imageUrl" :alt="banner.title" />
          </a>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-white"></div>
      <div
        class="swiper-button-prev swiper-button-white"
        slot="button-prev"
      ></div>
      <div
        class="swiper-button-next swiper-button-white"
        slot="button-next"
      ></div>
    </div> -->
    <!-- 幻灯片 结束 -->

    <div id="aCoursesList">
      <!-- 网校课程 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac">
              <span class="c-333">热门课程</span>
            </h2>
          </header>
          <div>
            <article class="comm-course-list">
              <ul class="of" id="bna">
                <li v-for="course in courseList" :key="course.id">
                  <div class="cc-l-wrap">
                    <section class="course-img">
                      <img
                        :src="course.cover"
                        class="img-responsive"
                        :alt="course.title"
                      />
                      <div class="cc-mask">
                        <a
                          :href="'/course/' + course.id"
                          title="开始学习"
                          class="comm-btn c-btn-1"
                          >开始学习</a
                        >
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a
                        href="#"
                        :title="course.title"
                        class="course-title fsize18 c-333"
                        >{{ course.title }}</a
                      >
                    </h3>
                    <section class="mt10 hLh20 of">
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{ course.choiceCount }}人学习</i>
                        |
                        <i class="c-999 f-fA">{{ course.commentCount }}评论</i>
                      </span>
                    </section>
                  </div>
                </li>
              </ul>
              <div class="clear"></div>
            </article>
            <section class="tac pt20">
              <a href="/course" title="全部课程" class="comm-btn c-btn-2"
                >全部课程</a
              >
            </section>
          </div>
        </section>
      </div>
      <!-- /网校课程 结束 -->
      <!-- 网校名师 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac">
              <span class="c-333">名师大咖</span>
            </h2>
          </header>
          <div>
            <article class="i-teacher-list">
              <ul class="of">
                <li v-for="teacher in teacherList" :key="teacher.id">
                  <section class="i-teach-wrap">
                    <div class="i-teach-pic">
                      <a :href="'/teacher/' + teacher.id" :title="teacher.name">
                        <img :alt="teacher.name" :src="teacher.avatar" />
                      </a>
                    </div>
                    <div class="mt10 hLh30 txtOf tac">
                      <a
                        :href="'/teacher/' + teacher.id"
                        :title="teacher.name"
                        class="fsize18 c-666"
                        >{{ teacher.name }}</a
                      >
                    </div>
                    <div class="mt15 i-q-txt">
                      <p class="c-999 f-fA">
                        {{ teacher.intro }}
                      </p>
                    </div>
                  </section>
                </li>
              </ul>
              <div class="clear"></div>
            </article>
            <section class="tac pt20">
              <a href="/teacher" title="全部讲师" class="comm-btn c-btn-2"
                >全部讲师</a
              >
            </section>
          </div>
        </section>
      </div>
      <!-- /网校名师 结束 -->
    </div>
  </div>
</template>

<script>
import banner from "@/api/banner";
import index from "@/api/index";
export default {
  data() {
    return {
      swiperOption: {
        //配置分页
        pagination: {
          el: ".swiper-pagination", //分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: ".swiper-button-next", //下一页dom节点
          prevEl: ".swiper-button-prev", //前一页dom节点
        },
        loop: true,
      },
      bannerList: [
        {"id":"1362649780076994562","title":"东华大学教务处","imageUrl":"https://edu-guli-0313.oss-cn-beijing.aliyuncs.com/2021/02/16/998581747fdef3422fb2d33e6275ec94.jpeg","linkUrl":"https://cas.dhu.edu.cn/authserver/login?service=http%3A%2F%2Fjwgl.dhu.edu.cn%2Fdhu%2FcasLogin","sort":0,"isDeleted":0,"createTime":"2021-02-19 14:26:39","modifiedTime":"2021-02-21 15:14:09"},{"id":"1362650630237249537","title":"哔哩哔哩","imageUrl":"https://edu-guli-0313.oss-cn-beijing.aliyuncs.com/2021/02/19/a8ca22ba0f404c0484268dcdbcb56968file.png","linkUrl":"https://www.bilibili.com/","sort":1,"isDeleted":0,"createTime":"2021-02-19 14:30:02","modifiedTime":"2021-02-19 14:30:02"}
      ], //banner数组
      courseList: [], //热门课程列表
      teacherList: [], //名师列表
    };
  },
  created() {
    // 调用查询banner的方法
    // this.getBannerList();
    this.getHotCourseTeacher();
  },
  methods: {
    getHotCourseTeacher() {
      index.getIndexData().then((response) => {
        this.courseList = response.data.data.eduList;
        this.teacherList = response.data.data.adminList;
      });
    },
    // getBannerList() {
    //   banner.getListBanner().then((response) => {
    //     this.bannerList = response.data.data.list;
    //   });
    // },
  },
};
</script>
<style lang="less" scoped>
.course-img {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: auto;
  }
}

#bna {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.el-carousel__item img {
  width: 100%;
}
</style>
